import React, { useEffect, useState } from 'react';
import "./ProList.scss"
import { Table, Space, Button, message, Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import service from "../../../api/index"
import { useNavigate } from 'react-router-dom'

interface Props {

}
interface DataType {
    key: string;
    img1: string;
    brand: string;
    category: string;
    desc: string,
    proid: string,
    issale: number,
    isseckill: number,
    isrecommend: number,
    checked:boolean,
    proname:string,
    originprice:number,
    sales:number
}
var id: string[] = []

function ProList(props: Props) {
    var navigate = useNavigate();
    const [list, setList] = useState([]);
    const [refresh, setRefresh] = useState(false);
    const [issale, setIssale] = useState(0);
    const [isseckill, setIsseckill] = useState(0);
    const [isrecommend, setIsrecommend] = useState(0);
    let getList = () => {
        service.pro.pro_list().then((res) => {
            console.log(res);
            if (res.data.code == 200) {
                setList(res.data.data);
                setIsseckill(res.data.data.isseckill)
                setIsrecommend(res.data.data.isrecommend)
            }
        })
    }
    useEffect(() => {
        //在这里发请求，创建定时器，监听
        // console.log('组件挂载了')
        getList()
    }, [])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'proid',
            key: 'proid',
            render: (text, record, index) => <a>{index + 1}</a>,
        },
        {
            title: '图片',
            dataIndex: 'img1',
            key: 'img1',
            render: (_, record) => (
                <Space size="middle">
                    <img src={record.img1} alt="" />
                </Space>
            ),
        },
        {
            title: '名称',
            dataIndex: 'proname',
            key: 'proname',
            render: (_, record) => (
                <Space size="middle">
                    <p>{record.proname}</p>
                </Space>
            ),
        },
        {
            title: '品牌',
            key: 'brand',
            dataIndex: 'brand',
        },
        {
            title: '分类',
            key: 'category',
            dataIndex: 'category',
        },
        {
            title: '原价',
            key: 'originprice',
            dataIndex: 'originprice',
            sorter: (a, b) => a.originprice - b.originprice,
        },
        {
            title: '折扣',
            key: 'discount',
            dataIndex: 'discount',
        },
        {
            title: '销量',
            key: 'sales',
            dataIndex: 'sales',
            sorter: (a, b) => a.sales - b.sales,
        },
        {
            title: '是否售卖',
            key: 'issale',
            dataIndex: 'issale',
            render: (_, record) => (
                <Space size="middle">
                    <Switch defaultChecked={record.issale == 1 ? true : false} />
                </Space>
            ),
        },
        {
            title: '是否秒杀',
            key: 'isseckill',
            dataIndex: 'isseckill',
            render: (_, record) => (
                <Space size="middle">
                    <Switch defaultChecked={record.isseckill == 1 ? true : false} onChange={(checked:boolean) => { onchange1(checked, record) }} />
                </Space>
            ),
        },
        {
            title: '是否推荐',
            key: 'isrecommend',
            dataIndex: 'isrecommend',
            render: (_, record) => (
                <Space size="middle">
                    <Switch defaultChecked={record.isrecommend == 1 ? true : false} onChange={(checked:boolean) => { onchange2(checked, record) }} />
                </Space>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button onClick={() => {}} danger type="primary">删除</Button>
                </Space>
            ),
        },
    ];

    let onchange1 = async (checked:boolean,record: any) => {
        let res1 = await service.pro.pro_updateFlag({ proid: record.proid, type: 'isseckill', flag:checked});
        if (res1.data.code == 200) {
            message.success('修改成功')
        } else {
            message.success('修改失败')
        }
    }
    let onchange2 = async (checked:boolean,record: any) => {
        let res2 = await service.pro.pro_updateFlag({ proid: record.proid, type: 'isrecommend', flag: checked });
        if (res2.data.code == 200) {
            message.success('修改成功')
        } else {
            message.success('修改失败')
        }
    }





    //更新页面
    useEffect(() => {
        const doRefresh = () => setRefresh(true)
        refresh && setTimeout(() => { setRefresh(false) }, 0.0001)
    }, [list])

    return (
        <div className='prolist'>
            <Table columns={columns} dataSource={list} rowKey='proid' />
        </div>
    );
}

export default ProList;